<template>
  <n-drawer v-model:show="active" width="calc(100vw - 480px)" :placement="placement">
    <n-drawer-content>
      <n-grid :x-gap="24" :y-gap="8">
        <n-grid-item :span="8">
          <div>
            <div class="items">
              <p><label for="name">标题：</label></p>
              <div><input type="text" class="search-input w100" v-model="cnote.title"></div>
            </div>
            <div class="items mt10">
              <p><label for="name">封面：</label></p>
              <div class="flex">
                <k-uploader v-model="cnote.img"></k-uploader>
              </div>
            </div>
            <div class="items mt10">
              <p><label for="name">价格：</label></p>
              <div>
                成交价：<input type="text" class="search-input w100" v-model="cnote.price">
                真实价：<input type="text" class="search-input w100" v-model="cnote.realprice">
              </div>
            </div>
            <div class="items mt10">
              <p><label for="name">状态：</label></p>
              <div>
                <label><input type="radio" v-model="cnote.status" name="status" value="1" :checked="cnote.status==1">发布</label>
                <label class="ml10"><input type="radio" v-model="cnote.status" name="status" value="0" :checked="cnote.status==0">未发布</label>
              </div>
            </div>
            <div class="items mt10">
              <div><button class="btnboxsub"><i class="iconfont icon-bianji mr5"></i>保存</button></div>
            </div>
          </div>
        </n-grid-item>
        <n-grid-item :span="16">
          <k-editor  ref="editorRef" v-model:html="cnote.content"></k-editor>
        </n-grid-item>
      </n-grid>
    </n-drawer-content>
  </n-drawer>
</template>
<script setup>
  const active = ref(false)
  const placement = ref('right')
  const cnote = ref({})

  const handleOpen = async(data)=>{
    cnote.value = data
    active.value = true
    const resp = await useLoadNoteDetail(data.id)
    cnote.value.content = resp.data.content
  }

  defineExpose({
    handleOpen
  })
</script>
<style setup>
.btnboxsub{background:#01dc82;color:#fff;padding:6px 20px;border-radius:6px;}
</style>